<%@ page import="java.util.List" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ page isELIgnored="false" %>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>回购网</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
    <link rel="stylesheet" href="css/shouji.css" />
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <script type="text/javascript" src="js/shouji.js" ></script>

    <style>
        #page{
            width: 100%;
            text-align: center;
        }
        .go_search{
            width: 60px;
            height: 64px;
            background: url("img/search_btn.gif") no-repeat;
            background-size: cover;
        }
    </style>

</head>

<body>
<div id="row1" class="row">
    <div id="row1_1" >
        <div id="row1_2">
            <img id="row1_4" src="img/hello.jpg" style="display: none;position: absolute;left: 180px;top:35px;"/>

            <div class="row1_5" >
                <img src="img/shortcut_icon1.png" />&nbsp;
                <span >手机逛回购</span>
            </div>
            &nbsp;&nbsp;<span>|</span>&nbsp;
            <div>
                <img src="img/shortcut_icon2.png"/>&nbsp;
                <span>
								当前：
								<span>
									深圳&nbsp;<span class="change">[切换城市]</span>
								</span>
							</span>
            </div>
        </div>


        <div id="row1_3">
            <span class="change">登录</span>&nbsp;<span>|</span>&nbsp;
            <span class="change">注册</span>&nbsp;<span>|</span>&nbsp;
            <span class="change">网站导航</span>&nbsp;<span>|</span>
        </div>

    </div>
</div>


<div id="row2">

    <div id="row2_1">
        <img src="img/logos.png"/>
    </div>

    <div id="row2_2">
        <font class="change">闲置回收</font>
    </div>

    <div id="row2_3">
        <font class="change">旧机换新</font>
        <img src="img/new.png" />
    </div>
    <div id="row2_4">
        <font class="change">靓机优选</font>
    </div>

    <div id="row2_5" style="margin-top: 25px;">
        <img src="img/kc.gif" />
    </div>

</div>


<div id="row3">
    <div id="row3_1">
        <div id="row3_2">
            <h1 style="font-weight: normal;color: gray;font-size: 28px;">搜一下，看看你的二手闲置还值多少钱</h1>
        </div>

        <div id="row3_3">
            <div id="row3_4" style="width: 150px;border-right: solid gainsboro 1px;">
                <img id="row3_5" style="margin-top: 20px;margin-left: 20px;margin-bottom: 20px;" src="img/search_icon1.gif" />
                <span style="font-size: 15px;color: gray; margin-top: 10px;margin-bottom: 10px;margin-left:5px;padding-top: 12px;">全部分类</span>
                <img src="img/search_icon2.gif" style="margin-bottom: 28px;margin-left:2px;margin-top: 28px;"/>
            </div>
            <div id="row3_6" style="display: flex;">
                <form style="display: flex" action="selectByPage">
                <input style="width: 380px"  id="search_07" type="text" name="phone_name" placeholder="请输入品牌型号搜索"/>
                <input type="submit" class="go_search" value="">
               <%-- <img class="go_search" style="cursor: pointer;margin-bottom: 12px;margin-top: 12px;margin-left: 4px;" src="img/search_btn.gif" />--%>
                </form>
            </div>
        </div>
    </div>
</div>

<!--手机品牌列表-->
<div id="row4" style="height: 800px;">
    <div id="row4_1">
        <div id="row4_2">首页 > 闲置回收 > 手机</div>

        <div id="row4_3">
            <div id="row4_4">
                <div style="font-size: 20px;height: 60px;line-height: 60px;background-color: #F5F5F4;padding-left: 20px;border-bottom: 1px solid gainsboro;">搜索结果分类</div>
                <div class="left_list">
                    <img class='img1' src="img/phone1.jpg"/>
                    <font class="change">手机</font>
                    <img class='img2' src="img/icon05.png"/>
                </div>

                <div class="left_list">
                    <img class='img1' src="img/apple.jpg"/>
                    <font class="change">苹果系列</font>
                    <img class='img2' src="img/icon05.png"/>
                </div>

                <div class="left_list">
                    <img class='img1' src="img/pingban.jpg"/>
                    <font class="change">平板电脑</font>
                    <img class='img2' src="img/icon05.png"/>
                </div>

                <div style="font-size: 20px;height: 60px;line-height: 60px;padding-left: 20px;">最近热门回收</div>

                <div class="letf_hot">
                    <img src="img/hot1.jpg"/>
                    <div class="letf_hot_num">
                        <div class="change">ipad mini</div>
                        <div>110</div>
                    </div>
                </div>

                <div class="letf_hot">
                    <img src="img/hot2.jpg"/>
                    <div class="letf_hot_num">
                        <div class="change">iPhone 8</div>
                        <div>1430</div>
                    </div>
                </div>

                <div class="letf_hot">
                    <img src="img/hot2.jpg"/>
                    <div class="letf_hot_num">
                        <div class="change">iPhone 8</div>
                        <div>1870</div>
                    </div>
                </div>
                <div class="letf_call">
                    <img src="img/icon30.png"/>
                    <div>400-9608-558</div>
                </div>
            </div>
            <div id="row4_5">
                <div class="right_top" style="border: 1px solid gainsboro;">
                    <div style="height:40px;background-color:#F4F4F4;line-height: 40px;padding-left: 10px;font-family: '微软雅黑';font-size: 20px;border-bottom: solid 1px gainsboro;">手机品牌</div>
                    <div id="phone_type">
                        <script>
                            function fn1(res){
                                $(res).addClass("addColor");
                            }
                            function fn2(res){
                                $(res).removeClass("addColor");
                            }

                            function fn3(res) {
                                var brand_name = $(res).text();
                                window.location.href="selectByPage?brand_name="+brand_name;
                            }


                            $(function () {

                                $.post(
                                    "selectBrandNames",
                                    {status:1},
                                    function (res) {
                                        var names = res;
                                        var str = "";
                                        for(var i=0;i<names.length;i++){
                                            str +="<span style='cursor: pointer' onclick='fn3(this)'>"+names[i]+"</span>"+"&nbsp;"+"|"+"&nbsp;";
                                        }
                                        $("#hot_brand").append(str);
                                    }
                                )

                                $.post(
                                    "selectBrandNames",
                                    {status:0},
                                    function (res) {
                                        var names = res;
                                        var str = ""
                                        for(var i=0;i<names.length;i++){
                                            str +="<span style='cursor: pointer' onclick='fn3(this)' onmouseover='fn1(this)' onmouseout='fn2(this)'>"+names[i]+"</span>"+"&nbsp;"+"|"+"&nbsp;";
                                        }
                                        $("#normal_brand").append(str);
                                    }
                                )


                            })
                        </script>
                        <div id="hot_brand" style="color: orange"></div>
                        <div id="normal_brand" style="word-spacing: 2px;letter-spacing: 1px;"></div>
                    </div>
                </div>

                <div style="height: 50px;line-height: 50px;">
                    <span style="letter-spacing:1px;font-weight: 400;">手机回收</span>&nbsp;&nbsp;<span style="letter-spacing:1px;">搜索到<span style="color: orange;">${phones.totalCounts}</span>个结果</span>
                </div>

                <div id="phone_list" style="width: 100%;height: 430px;">

                    <c:forEach var="phone" items="${phones.data}">
                            <div class="phone">
                                <c:choose>
                                    <c:when test="${phone.status==1}">
                                        <img class="hot_tittle" src="img/hot.png"/>
                                    </c:when>
                                    <c:otherwise>
                                        <img class="hot_tittle" src=""/>
                                    </c:otherwise>
                                </c:choose>
                                <div id="phone_pic"><img class="phone_pic" src="${phone.phone_img}"/></div>
                                <div style="text-align: center;">${phone.name}</div>
                                <div id="go_assess"><a style="cursor: pointer" href="selectAssessInfo?id=${phone.id}"><img  class="go_assess" src="img/pg1.gif"/></a></div>
                            </div>
                    </c:forEach>

                </div>


                <div id="page" style="margin-top: 10px">
                    <ul class="pagination">
                        <li><c:choose>
                                <c:when test="${phones.currentPage>1}">
                                    <a href="selectByPage?pageNo=${phones.currentPage-1}"
                                       aria-label="Previous">上一页</a>
                                </c:when>
                                <c:otherwise>

                                </c:otherwise>
                            </c:choose></li>

                        <li><c:forEach var="i" begin="1" end="${phones.pageCounts}" step="1">
                                <c:choose>
                                     <c:when test="${phones.currentPage==i}">
                                          <li class="active"><a href="selectByPage?pageNo=${i}">${i}</a></li>
                                    </c:when>
                                    <c:otherwise>
                                        <li><a href="selectByPage?pageNo=${i}">${i}</a></li>
                                    </c:otherwise>
                              </c:choose>
                            </c:forEach></li>

                        <li><c:choose>
                                <c:when test="${phones.currentPage<phones.pageCounts}">
                                    <a href="selectByPage?pageNo=${phones.currentPage+1}"
                                       aria-label="Next">下一页</a>
                                </c:when>
                                <c:otherwise>

                                </c:otherwise>
                        </c:choose></li>
                    </ul>
                </div>



            </div>
        </div>
    </div>
</div>
<div class="bottom">

    <div class="bot_first">
        <div class="bot_fir" style="height: 36px;line-height: 36px;color: white;border-bottom: solid 1px darkgray;">关于我们</div>
        <div class="bot_first_head">关于回购网</div>
        <div class="bot_first_head">联系我们</div>
        <div class="bot_first_head">人才招聘</div>
    </div>

    <div class="bot_first">
        <div class="bot_fir" style="height: 36px;line-height: 36px;color: white;border-bottom: solid 1px darkgray;">服务</div>
        <div class="bot_first_head">服务条款</div>
        <div class="bot_first_head">投诉建议</div>
        <div class="bot_first_head">网站地图</div>
    </div>

    <div class="bot_first">
        <div class="bot_fir" style="height: 36px;line-height: 36px;color: white;border-bottom: solid 1px darkgray;">客服热线</div>
        <div>
            <img src="img/bot_num.png" />
        </div>

    </div>

    <div class="bot_first">
        <div class="bot_fir" style="height: 36px;line-height: 36px;color: white;border-bottom: solid 1px darkgray;">关注我们</div>
        <div style="display: flex;">
            <img src="img/xinlang.png"/>

            <img style="height: 70px;margin-top: 4px;" src="img/weixins.png"/>
        </div>
    </div>

</div>

<div style="width: 100%;color: white; text-align: center;background-color: #727272;height: 20px;line-height: 20px;font-size: 15px;">Copyright Reserved 2009-2018 @ 深圳市绿创网络科技有限公司版权所有 <span class="change">粤ICP备10071783号</span>  <span class="change">站长统计</span></div>
</body>

</html>